<template>
  <div class="views-container">
    <!--工具栏-->
    <div class="crud-group">
      <!-- 搜索 -->
      <el-select
        v-model="searchForm.dataType"
        placeholder="请选择状态"
        clearable
      >
        <el-option
          v-for="val in dataTypelist"
          :key="val"
          :label="val"
          :value="val"
        />
      </el-select>
      <el-input
        v-model="searchForm.menu"
        placeholder="请输入所属菜单"
        clearable
      />
      <el-input
        v-model="searchForm.operator"
        placeholder="请输入操作人员名称"
        clearable
      />
      <el-input
        v-model="searchForm.messageSubject"
        placeholder="请输入消息主题"
        clearable
      />
      <el-date-picker
        v-model="searchForm.timeInterval"
        type="datetimerange"
        start-placeholder="发生时间"
        end-placeholder="结束时间"
        :default-time="['00:00:00', '23:59:59']"
        clearable
      />
      <div style="display: flex">
        <el-button
          type="success"
          icon="el-icon-search"
          @click="search"
        >搜索</el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh-left"
          @click="reset"
        >重置</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      v-loading="loading"
      :data="clusterList"
      border
    >
      <el-table-column
        type="index"
        min-width="55"
        label="序号"
        align="center"
      />
      <el-table-column
        prop="menu"
        label="所属菜单"
        show-overflow-tooltip
        min-width="80px"
      />
      <el-table-column
        prop="operator"
        label="操作人员名称"
        show-overflow-tooltip
        min-width="100px"
      />
      <el-table-column
        prop="dataType"
        label="状态"
        show-overflow-tooltip
        min-width="80px"
      >
        <template slot-scope="scope">
          <el-tag
            :type="getStatusColor(scope.row.dataType)"
          >{{ scope.row.dataType }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="发生时间"
        show-overflow-tooltip
        min-width="160px"
      />
      <el-table-column
        prop="messageSubject"
        label="消息主题"
        show-overflow-tooltip
        min-width="300px"
      />
      <el-table-column
        label="日志结果"
        width="95px"
      >
        <template slot-scope="scope">
          <div
            style="
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              align-items: center;
            "
          >
            <el-button
              v-if="scope.row.logPath"
              size="mini"
              type="text"
              @click="detailClick(scope.row)"
            >详情</el-button>
            <span v-else>无日志</span>
            <el-button
              v-if="scope.row.messageSubject.includes('源级热备数据同步~')"
              v-permission="permission.edit"
              size="mini"
              style="margin-left: 0.5rem"
              type="text"
              @click="editClick(scope.row)"
            >编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <!--分页组件-->
      <el-pagination
        :current-page="current"
        :page-size="size"
        layout="prev, pager, next,sizes,total"
        :total="length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="closeDetail"
      :visible.sync="openDetail"
      title="日报详情"
      width="1000px"
      append-to-body
    >
      <codemirror
        :value="Url"
        :read-only="true"
      />
      <div style="margin-top: 20px; margin-left: 45%">
        <el-button
          type="primary"
          plain
          @click="closeDetail"
        >关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog
      width="300px"
      :visible.sync="editDialogVisible"
      title="修改发生时间"
      @close="editDialogVisible = false"
    >
      <div style="display: flex; justify-content: center">
        <el-date-picker
          v-model="editTime"
          type="datetime"
        />
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import monitorApi from '@/api/monitor/index'
import dateUtil from '@/utils/date'
import codemirror from '@/components/codemirror/codemirror.vue'

// import { downloadFile } from "@/utils/index";

export default {
  name: 'DataDesensitizationRules',
  components: {
    codemirror
  },
  data() {
    return {
      permission: {
        edit: ['admin', 'monitor:edit']
      },
      current: 1,
      size: 10,
      length: 0,
      jqForm: {},
      searchForm: {
        dataType: '',
        menu: '',
        operator: '',
        messageSubject: '',
        timeInterval: ['', '']
      },
      clusterList: [],
      openDetail: false,
      Url: '',
      loading: false,
      editDialogVisible: false,
      editTime: '',
      selectedEditRow: {},
      dataTypelist: ['进行中', '异常', '等待中', '已完成']
    }
  },
  created() {
    this.getdata()
  },

  methods: {
    getStatusColor(status) {
      switch (status) {
        case '进行中':
          return ''
        case '异常':
          return 'danger'
        case '等待中':
          return 'warning'
        case '已完成':
          return 'success'
      }
    },
    editClick(row) {
      this.selectedEditRow = null
      this.selectedEditRow = row

      this.editTime = row.createTime
      this.editDialogVisible = true
    },
    async editSubmit() {
      const paramForm = {
        id: this.selectedEditRow.id,
        createTime:
          typeof this.editTime === 'string'
            ? this.editTime
            : dateUtil.getDateStr(this.editTime)
      }
      await monitorApi.changeTime(paramForm)
      this.$notify({ title: '成功', message: '修改成功', type: 'success' })
      this.editDialogVisible = false
      this.getdata()
    },

    getdata(resetPage = true) {
      if (resetPage) {
        this.current = 1
      }
      this.loading = true
      var data = {
        staDate: dateUtil.getDateStr(this.searchForm.timeInterval[0]),
        endDate: dateUtil.getDateStr(this.searchForm.timeInterval[1]),
        dataType: this.searchForm.dataType,
        menu: this.searchForm.menu,
        operator: this.searchForm.operator,
        messageSubject: this.searchForm.messageSubject,
        current: this.current,
        size: this.size
      }
      monitorApi
        .getData(data)
        .then((data) => {
          this.length = data.total
          if (data.total === 0) {
            this.jqForm = {}
          } else {
            this.jqForm = data.records[0]
          }
          this.clusterList = data.records
          this.loading = false
        })
        .catch(() => {})
    },
    search() {
      this.getdata()
    },
    reset() {
      this.searchForm = {
        dataType: '',
        menu: '',
        operator: '',
        messageSubject: '',
        timeInterval: ['', '']
      }

      this.getdata()
    },
    // 分页
    handleSizeChange(val) {
      this.current = 1
      this.size = val
      this.getdata()
    },
    // 分页
    handleCurrentChange(val) {
      this.current = val
      this.getdata(false)
    },
    detailClick(row) {
      const data = {
        logPath: row.logPath
      }
      this.Url = ''
      monitorApi
        .download(data)
        .then((res) => {
          console.log(res)
          // this.Url = process.env.VUE_APP_BASE_API + "/" + res;
          this.Url = res
          this.openDetail = true
        })
        .catch(() => {
          // this.$notify({
          //   title: "不存在该日志文件！",
          //   type: "error",
          //   duration: 6000,
          // });
        })
    },
    closeDetail() {
      this.openDetail = false
    }
  }
}
</script>
<style scoped>
.head-container .filter-item {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px 0px 0;
}

.logDetail {
  white-space: pre-wrap;
}
</style>
